<template>
  <main class="main-content">
    <div class="breadcrumb">
      <span class="breadcrumb-item">系统管理</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-item active">用户管理</span>
    </div>

    <div class="card">
      <!-- 筛选/操作栏 -->
      <div class="table-actions-bar">
        <div class="filter-group">
          <input type="text" class="form-input" placeholder="输入用户名或手机号搜索">
          <select class="form-select">
            <option>所有角色</option>
            <option>系统管理员</option>
            <option>运营人员</option>
          </select>
          <button class="btn btn-primary">查询</button>
        </div>
        <div class="actions-group">
          <button class="btn btn-primary">新增用户</button>
        </div>
      </div>

      <!-- 数据表格 -->
      <div class="table-container">
        <table class="data-table">
          <thead>
            <tr>
              <th><input type="checkbox"></th>
              <th>用户名</th>
              <th>手机号</th>
              <th>所属角色</th>
              <th>状态</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in users" :key="user.id">
              <td><input type="checkbox"></td>
              <td>{{ user.username }}</td>
              <td>{{ user.phone }}</td>
              <td>
                <span v-for="role in user.roles" :key="role" class="role-tag">{{ role }}</span>
              </td>
              <td>
                <span class="status-tag" :class="user.status.class">{{ user.status.text }}</span>
              </td>
              <td>{{ user.createTime }}</td>
              <td class="action-links">
                <a href="#">编辑</a>
                <a href="#">重置密码</a>
                <a href="#" class="text-danger">删除</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页栏 -->
      <div class="pagination-bar">
        <span class="total-count">共 {{ users.length }} 条数据</span>
        <!-- 分页器... -->
      </div>
    </div>
  </main>
</template>

<script setup>
import { ref } from 'vue';

const users = ref([
  {
    id: 1,
    username: 'admin',
    phone: '138****0001',
    roles: ['系统管理员'],
    status: { text: '正常', class: 'status-online' },
    createTime: '2023-01-01 10:00:00'
  },
  {
    id: 2,
    username: 'operator',
    phone: '139****0002',
    roles: ['运营人员'],
    status: { text: '正常', class: 'status-online' },
    createTime: '2023-02-15 14:30:00'
  },
  {
    id: 3,
    username: 'viewer',
    phone: '137****0003',
    roles: ['访客'],
    status: { text: '已禁用', class: 'status-offline' },
    createTime: '2023-03-20 09:00:00'
  }
]);
</script>

<style scoped>
.role-tag {
  display: inline-block;
  padding: 2px 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  margin-right: 5px;
  font-size: 12px;
}
.text-danger {
  color: #f5222d;
}
</style>